<template>
    <el-row>
        <el-col :span="8">
            <div class="sidebar-ctl-btn" @click="ctlBtnClick">
                <i v-if="isFold" class="el-icon-s-unfold"></i>
                <i v-else class="el-icon-s-fold"></i>
            </div>
        </el-col>
        <el-col style="text-align: right" :span="16">
            <div class="user-nav-item">
                <el-dropdown :hide-on-click="false">
                    <div class="user-info-content">
                        <img class="user-img" src="@/assets/logo.png"/>
                        <p>Habitplus <i class="el-icon-arrow-down"></i></p>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>个人信息</el-dropdown-item>
                            <el-dropdown-item>设置</el-dropdown-item>
                            <el-dropdown-item divided>退出系统</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-col>
    </el-row>
</template>

<style scope lang="scss">
.sidebar-ctl-btn {
    width: fit-content;
    cursor: pointer;
    background: none;
    font-size: xx-large;
    padding: 0 10px;
}

.sidebar-ctl-btn:hover {
    color: #0e6251;
    background-color: #f5f5f5;
}

.user-nav-item {
    cursor: pointer;
    height: 60px;
    width: fit-content;
    padding: 0 15px;
    display: flex;
    float: right;

    .el-dropdown {
        display: flex;
        vertical-align: middle;
        line-height: 60px !important;
    }

    .user-info-content {
        display: flex;
        font-size: 16px;

        p {
            margin-left: 10px;
        }
    }

    .user-img {
        padding-top: 5px;
        height: 50px;
        width: 50px;
        border-radius: 25px;
    }
}

.user-nav-item:hover {
    background-color: #f5f5f5;
}
</style>

<script>
export default {
    data() {
        return {
            isFold: false,
        };
    },
    methods: {
        ctlBtnClick() {
            this.$emit("ctlSideBar");
            this.isFold = !this.isFold;
        },
    },
};
</script>
